<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :defaultSelectedRowKeys="chosenIds"
      :rowSelectionSelect="rowSelectionSelect"
      :rowSelectionChange="rowSelectionChange"
      :rowSelectInvert="rowSelectInvert"
      :defaultParams="{
        galleryProductType: 0,
      }"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="产品名称">
            <a-input
              v-decorator="['galleryProductName']"
              placeholder="请输入产品名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="是否展示">
            <a-select
              style="width: 100px"
              :options="enableShowList"
              v-decorator="['enableShow', { initialValue: '' }]"
              placeholder="请选择审核状态"
            />
          </a-form-item>
          <a-form-item label="是否为新品">
            <a-select
              style="width: 100px"
              :options="enableNewList"
              v-decorator="['enableNew', { initialValue: '' }]"
              placeholder="请选择审核状态"
            />
          </a-form-item>
          <a-form-item label="图库所属">
            <a-select
              style="width: 150px"
              :options="ownershipList"
              v-decorator="['galleryProductType', { initialValue: 0 }]"
              placeholder="请选择审核状态"
            />
          </a-form-item>
        </a-form>
      </template>
    </search-table>
  </div>
</template>
<script>
import { showPlatformList } from "@/utils/dictData";
export default {
  name: "gallery",
  props: {
    defaultId: {
      type: Array,
      default() {
        return [];
      },
    },
    defaultRowsList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "/gallery/product/page",
      columns: [
        {
          title: "产品图片",
          dataIndex: "largeScreenPicture",
          key: "largeScreenPicture",
          align: "center",
          customRender: (text, row) => {
            //console.log('text', text)
            return <table-img src={text} />;
          },
        },
        {
          title: "产品名称",
          dataIndex: "galleryProductName",
          key: "galleryProductName",
          width: 150,
        },
        {
          title: "所属分类",
          dataIndex: "galleryClassificationName",
          key: "galleryClassificationName",
          width: 300,
        },
        {
          title: "展示平台",
          dataIndex: "exhibitionPlatform",
          key: "exhibitionPlatform",
          customRender: (text, row) => {
            let arr = text && text.split(",");
            let tmpData = [];
            arr.forEach((val) => {
              tmpData.push(this.getPlatformName(val));
            });
            return tmpData.join("/");
          },
        },
        {
          title: "是否展示",
          dataIndex: "enableShow",
          key: "enableShow",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "是";
            } else {
              text = "否";
            }
            return text;
          },
        },
        {
          title: "设为新品",
          dataIndex: "enableNew",
          key: "enableNew",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "是";
            } else {
              text = "否";
            }
            return text;
          },
        },
      ],
      // chosenIds: [...this.defaultId], // 不同分页下被选中的表格行id集合
      // allSelectedRows: [...this.defaultRowsList], // 不同分页下被选中的表格行
      chosenIds: this.defaultId, // 不同分页下被选中的表格行id集合
      allSelectedRows: this.defaultRowsList, // 不同分页下被选中的表格行
      ownershipList: [
        {
          label: "本店图库",
          value: 0,
        },
        {
          label: "其他图库",
          value: 1,
        },
      ],
      enableShowList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      enableNewList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
    };
  },
  methods: {
    //清空已选中
    initChosenIds() {
      this.chosenIds = [...this.defaultId];
      this.allSelectedRows = [...this.defaultRowsList];
    },
    // 表格单行选择
    rowSelectionSelect(record, selected) {
      if (!selected) {
        this.allSelectedRows.splice(
          this.allSelectedRows.findIndex((item) => item.id == record.id),
          1
        );
        this.chosenIds.splice(
          this.chosenIds.findIndex((item) => item == record.id),
          1
        );
      }
    },
    // 表格任意行发生选择或取消选择时回调
    rowSelectionChange(selectedRowKeys, selectedRows) {
      let _this = this;
      if (selectedRows.length > 0) {
        selectedRows.forEach((item) => {
          if (!_this.chosenIds.includes(item.id)) {
            _this.chosenIds.push(item.id);
            _this.allSelectedRows.push(item);
          }
        });
        selectedRowKeys = this.chosenIds;
        this.$refs.searchtable.selectedRowKeys = this.chosenIds;
      } else {
      }
    },
    rowSelectInvert(selected, selectedRows, changeRows) {
      if (!selected) {
        let ids = [];
        changeRows.forEach((item) => {
          ids.push(item.id);
        });
        this.chosenIds = this.chosenIds.filter(function (val) {
          return ids.indexOf(val) === -1;
        });
        let arr = [];
        this.allSelectedRows.forEach((item) => {
          if (this.chosenIds.includes(item.id)) {
            arr.push(item);
          }
        });
        this.allSelectedRows = arr;
      }
    },
    // 通过value展示名
    getPlatformName(value) {
      return showPlatformList
        .map((item) => {
          if (item.value == value) {
            return item.label;
          }
        })
        .filter((item) => {
          return item;
        });
    },
    a() {
      console.log("555555555555555");
    },
  },
};
</script>
<style lang="less" scoped>
</style>